import { broadcast_plan_list, delete_broadcast_plan } from '@/services/broadcast';
import paging_fun from '@/utils/paging';
import { InfoCircleTwoTone } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Dropdown, MenuProps, message, Modal, Tabs } from 'antd';
import moment, { MomentInput } from 'moment';
import { useRef, useState } from 'react';
import AddEducationTraining from './components/AddEducationTraining';
import AddPopularScience from './components/AddPopularScience';
import EditEducationTraining from './components/EditEducationTraining';
import EditPopularScience from './components/EditPopularScience';
type GithubIssueItem = {
  start_time: MomentInput;
  id: number;
  type: string;
  name: string;
  time: string;
  zhiceng: string;
  plan_time: string;
  end_time: string;
  create_at: string;
  create_user: string;
};
const Broadcast_plan = () => {
  const actionRef = useRef<ActionType>();
  const actionRef1 = useRef<ActionType>();
  // 新增科普模态框状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 编辑科普模态框状态
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  // 存储科普计划当前id
  const [popularId, setPopularId] = useState();

  // 新增专业教培模态框状态
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  // 编辑专业教培模态框状态
  const [isEditModalOpen1, setIsEditModalOpen1] = useState(false);
  // 存储专业教培计划当前id
  const [educationId, setEducationId] = useState();
  // 控制删除科普互动模态框的状态
  const [delVisible, setDelVisible] = useState(false);
  // 存储当前删除科普互动id
  const [delId, setDelId] = useState();
  // 控制删除专业教培模态框的状态
  const [delVisible1, setDelVisible1] = useState(false);
  // 存储当前删除专业教培id
  const [delId1, setDelId1] = useState();

  // 控制新增科普模态框显示和隐藏
  const isShowModal = (show: boolean) => {
    setIsModalOpen(show);
  };
  // 控制编辑科普模态框显示和隐藏
  const isShowEditModal = (show: boolean) => {
    setIsEditModalOpen(show);
  };
  // 控制新增专业教培模态框显示和隐藏
  const isShowModal1 = (show: boolean) => {
    setIsModalOpen1(show);
  };
  // 控制编辑专业教培模态框显示和隐藏
  const isShowEditModal1 = (show: boolean) => {
    setIsEditModalOpen1(show);
  };
  // 获取科普互动直播计划列表
  const get_popular_plan_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      type: 1,
      status: 0,
    };
    // console.log(params);
    const res = await broadcast_plan_list(request_body);
    console.log('互动', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 获取专业教培直播计划列表
  const get_education_plan_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      type: 2,
      status: 0,
    };
    // console.log(params);
    const res = await broadcast_plan_list(request_body);
    console.log('互动', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 新增直播回调事件
  const onClick: MenuProps['onClick'] = ({ key }) => {
    console.log(key, 'iiiiii');
    if (key === '1') {
      isShowModal(true);
    } else {
      isShowModal1(true);
    }
  };
  // 删除科普互动直播计划按钮回调
  const isShowDelVisible = (status: boolean) => {
    setDelVisible(status);
  };

  // 确认删除科普互动直播计划
  const delOk = async () => {
    let request_body = {
      id: delId,
    };
    const res: any = await delete_broadcast_plan(request_body);
    if (res.msg == 'ok') {
      actionRef.current?.reload();
      message.success('删除成功');
      paging_fun(actionRef);
    } else {
      message.error(res.msg);
    }
    isShowDelVisible(false);
  };

  // 删除专业教培直播计划按钮回调
  const isShowDelVisible1 = (status: boolean) => {
    setDelVisible1(status);
  };

  // 确认删除专业教培直播计划
  const delOk1 = async () => {
    let request_body = {
      id: delId1,
    };
    const res: any = await delete_broadcast_plan(request_body);
    if (res.msg == 'ok') {
      actionRef1.current?.reload();
      message.success('删除成功');
      paging_fun(actionRef1);
    } else {
      message.error(res.msg);
    }
    isShowDelVisible1(false);
  };

  // 切换tab
  const changeTab = (key: string) => {
    if (key == '科普互动') {
      actionRef.current?.reload();
    } else if (key == '专业教培') {
      actionRef1.current?.reload();
    }
  };

  // 科普互动
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播主题',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '主讲医生',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '医生职称',
      dataIndex: 'positional_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        return moment(record.start_time).format('YYYY-MM-DD');
      },
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '计划开始时间',
      dataIndex: 'plan_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return moment(record.start_time).format('HH:mm:00');
      },
    },
    {
      title: '计划结束时间',
      dataIndex: 'end_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return moment(record.end_time).format('HH:mm:00');
      },
    },
    {
      title: '创建人',
      dataIndex: 'manage_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => [
        <Button
          key="editable"
          type="link"
          onClick={() => {
            setPopularId(record.id);
            isShowEditModal(true);
          }}
        >
          编辑
        </Button>,
        <Button
          key="deltable"
          type="link"
          onClick={() => {
            isShowDelVisible(true);
            setDelId(record.id);
          }}
        >
          删除
        </Button>,
      ],
    },
  ];
  // 专业教培
  const columns1: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '课程主题',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '主讲医生',
      dataIndex: 'username',
      align: 'center',
    },
    {
      title: '医生职称',
      dataIndex: 'positional_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        return moment(record.start_time).format('YYYY-MM-DD');
      },
    },
    {
      title: '直播日期',
      dataIndex: 'time',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '计划开始时间',
      dataIndex: 'start_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return moment(record.start_time).format('HH:mm:00');
      },
    },
    {
      title: '计划结束时间',
      dataIndex: 'end_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        return moment(record.end_time).format('HH:mm:00');
      },
    },
    {
      title: '创建人',
      dataIndex: 'manage_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => [
        <Button
          key="editable"
          type="link"
          onClick={() => {
            setEducationId(record.id);
            isShowEditModal1(true);
            // setId(record.id);
          }}
        >
          编辑
        </Button>,
        <Button
          key="deltable"
          type="link"
          onClick={() => {
            isShowDelVisible1(true);
            setDelId1(record.id);
          }}
        >
          删除
        </Button>,
      ],
    },
  ];
  const items: MenuProps['items'] = [
    {
      label: '科普互动',
      key: '1',
    },
    {
      label: '专业教培',
      key: '2',
    },
  ];
  return (
    <PageContainer
      breadcrumb={false}
      header={{
        extra: [
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items,
              onClick,
            }}
          >
            <Button key="4" style={{ padding: '0 12px' }} type="primary">
              新增直播
            </Button>
          </Dropdown>,
        ],
      }}
    >
      <Tabs
        defaultActiveKey="科普互动"
        onChange={changeTab}
        items={[
          {
            key: '科普互动',
            label: '科普互动',
            children: (
              <>
                <ProTable<GithubIssueItem>
                  columns={columns}
                  actionRef={actionRef}
                  request={async (params = {}) => get_popular_plan_list(params)}
                  rowKey={(record) => record.id}
                  search={{
                    labelWidth: 'auto',
                  }}
                  options={{
                    setting: {
                      listsHeight: 400,
                    },
                  }}
                  pagination={{
                    pageSize: 10,
                  }}
                  dateFormatter="string"
                  headerTitle="科普互动计划列表"
                />
              </>
            ),
          },
          {
            key: '专业教培',
            label: '专业教培',
            children: (
              <ProTable<GithubIssueItem>
                columns={columns1}
                actionRef={actionRef1}
                request={async (params = {}) => get_education_plan_list(params)}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                }}
                options={{
                  setting: {
                    listsHeight: 400,
                  },
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="专业教培计划列表"
              />
            ),
          },
        ]}
      />
      {/* 新增科普互动 */}
      {isModalOpen ? (
        <AddPopularScience
          isModalOpen={isModalOpen}
          isShowModal={isShowModal}
          actionRef={actionRef}
        ></AddPopularScience>
      ) : (
        ''
      )}
      {/* 编辑科普互动 */}
      {isEditModalOpen ? (
        <EditPopularScience
          isShowEditModal={isShowEditModal}
          isEditModalOpen={isEditModalOpen}
          popularId={popularId}
          actionRef={actionRef}
        ></EditPopularScience>
      ) : (
        ''
      )}
      {/* 新增专业教培 */}
      {isModalOpen1 ? (
        <AddEducationTraining
          isModalOpen1={isModalOpen1}
          isShowModal1={isShowModal1}
          actionRef1={actionRef1}
        ></AddEducationTraining>
      ) : (
        ''
      )}
      {/* 编辑专业教培 */}
      {isEditModalOpen1 ? (
        <EditEducationTraining
          isShowEditModal1={isShowEditModal1}
          isEditModalOpen1={isEditModalOpen1}
          educationId={educationId}
          actionRef1={actionRef1}
        ></EditEducationTraining>
      ) : (
        ''
      )}
      {/* 删除科普互动模态框 */}
      <Modal
        title="删除确认"
        open={delVisible}
        onOk={delOk}
        onCancel={() => isShowDelVisible(false)}
      >
        <Divider />
        <p>
          <InfoCircleTwoTone twoToneColor="#ffcc00" />{' '}
          科普互动直播计划删除后无法恢复，确定要删除吗？
        </p>
      </Modal>
      {/* 删除专业教培模态框 */}
      <Modal
        title="删除确认"
        open={delVisible1}
        onOk={delOk1}
        onCancel={() => isShowDelVisible1(false)}
      >
        <Divider />
        <p>
          <InfoCircleTwoTone twoToneColor="#ffcc00" />{' '}
          专业教培直播计划删除后无法恢复，确定要删除吗？
        </p>
      </Modal>
    </PageContainer>
  );
};
export default Broadcast_plan;
